<template>
  <div class="zong">
     <el-container>
        <el-aside width="200px">
      <h5 class="mb-2">管理后台</h5>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :router='true'
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><user /></el-icon>
            <span> 管理员</span>
          </template>
          <el-menu-item-group >
            <el-menu-item index="/manager" :route="{path:'/manager'}" > <el-icon><icon-menu /></el-icon>管理员列表</el-menu-item>
          </el-menu-item-group>
         
        </el-sub-menu>
       <el-sub-menu index="2">
          <template #title>
            
            <el-icon><shop /></el-icon>
            <span>  商品管理</span>
          </template>
          <el-menu-item-group >
            <el-menu-item index="/listgoods" :route="{path:'/listgoods'}"> <el-icon><icon-menu /></el-icon>商品列表</el-menu-item>
             <el-menu-item index="/listgoodscate" :route="{path:'/listgoodscate'}"> <el-icon><icon-menu /></el-icon>商品分类列表</el-menu-item>
              <el-menu-item index="/listgoodsattr" :route="{path:'/listgoodsattr'}"> <el-icon><icon-menu /></el-icon>商品属性列表</el-menu-item>
               <el-menu-item index="/listswiper" :route="{path:'/listswiper'}"> <el-icon><icon-menu /></el-icon>轮播图列表</el-menu-item>
          </el-menu-item-group>
         
        </el-sub-menu>
          <el-sub-menu index="3">
          <template #title>
            <el-icon><place /></el-icon>
            <span>权限管理</span>
          </template>
          <el-menu-item-group >
            <el-menu-item index="/listrole" :route="{path:'/listrole'}"> <el-icon><icon-menu /></el-icon>角色列表</el-menu-item>
             <el-menu-item index="/listmenu" :route="{path:'/listmenu'}"> <el-icon><icon-menu /></el-icon>权限列表</el-menu-item>
          </el-menu-item-group>
         
        </el-sub-menu>
          <el-sub-menu index="4">
          <template #title>
            <el-icon><document /></el-icon>
            <span> 订单管理</span>
          </template>
          <el-menu-item-group >
            <el-menu-item index="/listorder" :route="{path:'/listorder'}" > <el-icon><icon-menu /></el-icon>订单列表</el-menu-item>
          </el-menu-item-group>
         
        </el-sub-menu>
          <el-sub-menu index="5">
          <template #title>
           <el-icon><user /></el-icon>
            <span> 客户管理</span>
          </template>
          <el-menu-item-group >
            <el-menu-item index="/client" :route="{path:'/client'}" > <el-icon><icon-menu /></el-icon>客户列表</el-menu-item>
          </el-menu-item-group>
         
        </el-sub-menu>
      <el-button class="foot1" type="text" @click="dialogTable=true">改密</el-button>
      <el-button class="foot2" type="text" @click="tuichu()">退出</el-button>  
      </el-menu> 
     
  
 </el-aside>
 
   <el-main>
             
            <router-view></router-view>
    </el-main>
  </el-container>
  <el-dialog
        class="dia1"
           v-model="dialogTable"
            width="45%"
            :before-close="handleClose"
            >
            <div class="yh">
              <label>新密码:</label> 
              <el-input type="password" placeholder="新密码" v-model="passwd" ></el-input>
            </div>
             <div class="yh">
              <label>再次输入:</label> 
              <el-input type="password" placeholder="再次输入" v-model="passwd1"></el-input>
            </div>
            <br>
            <span :v-slot="footer" class="dialog-footer">
              <el-button class="bj" type="primary" @click="aa">修改</el-button>
              <el-button class="bj" type="warning" @click="dialogTable = false">取消</el-button>
            </span>
          </el-dialog>
  </div>
</template>

<script lang="ts" >
import {
  Location,
  Document,
  Menu as IconMenu,
  Setting,
  User,
  Shop,
  Place
} from '@element-plus/icons-vue'
import { ref, reactive,computed,toRefs,onMounted} from "vue";
import { useRouter } from 'vue-router';
import { ElMessage,ElMessageBox } from 'element-plus';
import httpRequest from '../service'

// const dialogTable=ref(false)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

interface DataProps{
  dialogTable:boolean,
  aa:()=>void,
  tuichu:()=>void,
  passwd:string,
  passwd1:string

  
}

  export default {
  name:'index',
   setup(){
      const router = useRouter();
      const data:DataProps=reactive({
          dialogTable:false,
          passwd:"",
          passwd1:"",
          aa:()=>{
              console.log(11);
         if(data.passwd===data.passwd1){
        httpRequest
         .request({
    url: '/users/updusers',
    method: 'post',
    data:{
      id:sessionStorage.getItem('id') ,
      passwd:data.passwd
    },
    interceptors: {
      requestInterceptor: (config) => {
        console.log(config)
        return config
      }
    }
  })
  .then((res:any) => {

    if(res.code===200){
       router.push("/")
       sessionStorage.clear()
          ElMessage({
            message: '修改成功',
            type: 'success',
              })
     }
  })

       }else{
         ElMessage.error('修改失败')
       }
          },
          tuichu:()=>{
                      ElMessageBox.confirm(
                '确定需要退出吗？',
                '退出',
                {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning',
                }
              )
                .then(() => {
                  router.push("/")
                    sessionStorage.clear()
                      ElMessage({
                  message: '退出成功',
                  type: 'success',
                    })
                })
                .catch(() => {
                  ElMessage({
                    type: 'info',
                    message: '取消删除',
                  })
                })
                  
          }
 })
      const refData=toRefs(data)
      return{
        ...refData
      }
   }
   
} 
</script>

<style lang="less" scoped>
el-menu-item{
  text-align: center;
}

.xia{
  margin-top: 268px;

  
}
.yh{
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top:15px;
  line-height:45px;
}
.yh .el-input{
    width:80%;
    height:25px;
    margin: 0px 0;
    
}
.el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    height: 100vh;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    height: 100vh;
  }
  .foot1{
    width: 180px;
    margin-top: 260px;
     height:50px;
    background-color: #909399;
    color: white;
    width: 99.5%;
    text-align: center;
    line-height: 30px;
   }
    .foot2{
    width: 180px;

    // margin-top: 100px;
     height:50px;
    background-color: #909399;
    color: white;
    width: 99.5%;
    text-align: center;
    line-height: 30px;
    margin-left: -2px;
     margin-top: 10px;
   
    }
</style>